<template>
    <div class="logon">
        <div class="logo">
            <img :src="WebConfig.web_logo" alt="等戴加载">
        </div>

        <div class="inp1">
            <Input type="number"
                   v-model="phone"
                   placeholder="请输入手机号"/>
            <span v-if="type === 2" :class="{'color':time!==60}" @click="getCode">{{ phoneText }}</span>
        </div>
        <Input :type="passwordText"
               v-model="password"
               :placeholder="passText"/>
        <br>
        <div class="mode"><span v-if="type===1">找回密码</span><span v-if="type===2">*未注册的手机号将自动注册</span><span
                @click="checkType">{{checkText}}</span></div>
        <br><br><br>
        <button-logon @clicks="onLogon" style="width: 80%;margin: 0 auto;"/>
    </div>
</template>

<script>
    import Input from "../../components/logon/Input";
    import buttonLogon from "../../components/logon/buttonLogon";
    import {Toast} from 'vant';

    export default {
        name: "logon",
        computed: {
            WebConfig() {
                return this.$store.state.logon.WebConfig;
            }
        },
        components: {
            Input,
            buttonLogon
        },
        data() {
            return {
                phone: "",
                password: '',
                passwordText: 'password',
                type: 1,
                passText: '请输入密码',
                phoneText: '获取验证码',
                checkText: '注册/验证码登录',
                time: 60,
                setTime: ''
            }
        },
        mounted() {
            this.$store.dispatch('getWebConfig')
        },
        methods: {
            getCode() {
                if (this.time < 60) {
                    return;
                }
                if (!(/^1[0-9]{10}$/.test(this.phone))) {
                    console.log(this.phone)
                    Toast.fail('手机号格式不对!');
                    return;
                }
                this.time = 59;
                this.phoneText = `获取验证码(${this.time})`
                this.setTime = setInterval(() => {
                    this.time--;
                    if (this.time === 0) {
                        this.time = 60;
                        this.phoneText = '获取验证码'
                        clearInterval(this.setTime)
                        return;
                    }
                    this.phoneText = `获取验证码(${this.time})`
                }, 1000)


                this.$store.dispatch('smsCode', {
                    mobile: this.phone,
                    sms_type: "login"
                })
            },
            checkType() {
                if (this.type === 1) {
                    this.type = 2
                    this.checkText = "密码登录"
                    this.passText = '请输入验证码'
                    this.passwordText = 'number'
                } else {
                    this.type = 1
                    this.checkText = "注册/验证码登录"
                    this.passText = '请输入密码'
                    this.passwordText = 'password'
                }
            },
            onLogon() {
                //
                if (!(/^1[0-9]{10}$/.test(this.phone))) {
                    Toast.fail('手机号格式不对!');
                    return;
                }
                if (this.type !== 2) {
                    if (!(/^[a-zA-z0-9]{8,16}$/.test(this.password))) {
                        console.log(this.password)
                        Toast.fail('密码格式不对!');
                        return;
                    }
                }

                if (this.type === 1) {
                    this.$store.dispatch('goLogon', {
                        mobile: this.phone,
                        password: this.password,
                        type: this.type
                    })
                } else if (this.type === 2) {
                    this.$store.dispatch('goLogon', {
                        mobile: this.phone,
                        sms_code: this.password,
                        type: this.type
                    })
                }
            }
        },
        filters: {},
        watch: {}
    }
</script>

<style scoped lang="scss">


    .inp1 {
        position: relative;

        .color {
            color: #999;
        }

        > span {
            position: absolute;
            color: #EB6100;
            top: 35px;
            right: 110px;
        }
    }

    .mode {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        font-size: 25px;
        color: #7c7d7d;
    }

    .logo {
        width: 63%;
        margin: 100px auto 130px;

        img {
            width: 100%;
        }
    }

    .logon {
        height: 100vh;
        background-color: #fff;
        overflow: hidden;
    }
</style>